@extends('layouts.answer')

@section('title')
    <title>测试详情</title>
@endsection
@section('content')
    <div class="answer-box">
        <div style="float: right; margin-right: 10px">
            <span id="nowCode" style="color: #138b6d; font-size: 16px">0</span><span> / {{ $total }}</span>
        </div>
        <div style="clear: both;"></div>
        <hr>
        <div class="que" id="que">
            <p>
                感谢您对中科生命的信任，为了帮助您更好的使用本测试，确保结果的有效性和准确性，请在测试前阅读以下须知：
            </p>
            <ul class="first-page">
                <li>本测试共计{{ $total }}道题， 平均测试时间约{{ ceil($total / 4) }}分钟；</li>
                <li>请仔细阅读每一道题，并根据实际情况，选择最适合自己的选项；</li>
                <li>本测试为免费测试，其结果仅供用户自评参考，不代表正式诊断；</li>
                <li>中科生命提供的所有测试及结果仅供个人使用，不做他用，如有其他使用，请联系原作者寻找授权。</li>
            </ul>
            <button class="btn start-btn">开始第一题</button>
        </div>

        <form id="answerForm">
            {{ csrf_field() }}
            <input type="hidden" name="temp_id" value="{{ $temp->id }}">
        @foreach($temp->questions as $k => $v)
            <div class="que" id="que_{{ $v->code }}"
                 next-code={{ $v->nextCode }}
                 prev-code={{ $v->prevCode }}
                 @if($v->prevCode === '0')data-first="true"@endif
                 @if($v->nextCode === '0')data-last="true"@endif
            >
                <p>
                    {{ $v->code }}、{{ $v->content }}
                </p>
                @if($v->type === 1)
                    <ul class="other-ul">
                        @foreach($v->options as $kk => $vv)
                            <li>
                                <input type="radio" name="res[{{ $v->id }}][]" value="{{ $vv->id }}" id="opt_{{ $v->code }}_{{ $vv->id }}">
                                <label for="opt_{{ $v->code }}_{{ $vv->id }}">
                                    {{ $vv->code }}、{{ $vv->content }}
                                </label>
                            </li>
                        @endforeach
                    </ul>
                @elseif($v->type === 2)
                    <ul class="other-ul">
                        @foreach($v->options as $kk => $vv)
                            <li>
                                <input type="checkbox" name="res[{{ $v->id }}][]" value="{{ $vv->id }}" id="opt_{{ $v->code }}_{{ $vv->id }}">
                                <label for="opt_{{ $v->code }}_{{ $vv->id }}">
                                    {{ $vv->content }}
                                </label>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <input type="text" name="res[{{ $v->id }}][]">
                @endif
            </div>
        @endforeach
        <div class="btn-box">
            <button type="button" class="btn prev-btn">上一题</button>
            <button type="button" class="btn next-btn">下一题</button>
            <button type="button" class="btn sub-btn">提交问卷</button>
        </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        $(function () {
            $('.que').hide();
            $('.btn-box').hide();
            $('#que').show();

            var nowCode = $('#nowCode').text();

            // 开始第一题
            $('.start-btn').bind('touchend', function (e) {
                e.preventDefault();
                $('.start-btn').trigger('click');
            });

            $('.start-btn').bind('click', function () {
                $('.que').hide();
                $('.que[data-first="true"]:first').show();
                $('.btn-box').show();
                $('.prev-btn').hide();

                var total = '{{ $total }}';
                if(total > 1) $('.sub-btn').hide();
                else $('.next-btn').hide();

                $('#nowCode').text(++nowCode);
            });

            // 下一题
            $('.next-btn').bind('touchend', function (e) {
                e.preventDefault();
                $('.next-btn').trigger('click');
            });

            $('.next-btn').click(function () {
                $('.prev-btn').show();
                var showDom = $('.que:not(:hidden)');
                var nextCode = showDom.attr('next-code');

                var id = 'que_' + nextCode;
                $('.que').hide();
                $('#' + id).show();
                $('#nowCode').text(++nowCode);

                var nowShowDom = $('.que:not(:hidden)');
                var dataLast = nowShowDom.attr('data-last');
                if(dataLast === 'true') {
                    $('.next-btn').hide();
                    $('.sub-btn').show();
                }
            });

            // 上一题
            $('.prev-btn').bind('touchend', function (e) {
                e.preventDefault();
                $('.prev-btn').trigger('click');
            });

            $('.prev-btn').click(function () {
                var showDom = $('.que:not(:hidden)');
                var prevCode = showDom.attr('prev-code');
                var id = 'que_' + prevCode;
                $('.que').hide();
                $('#' + id).show();
                $('#nowCode').text(--nowCode);

                // 点击上一题就说明一定还有下一题
                $('.sub-btn').hide();
                $('.next-btn').show();

                if(nowCode === 1) {
                    $('.prev-btn').hide();
                }
            });

            // 提交问卷
            $('.sub-btn').bind('touchend', function (e) {
                e.preventDefault();
                $('.sub-btn').trigger('click');
            });

            $('.sub-btn').click(function () {
                var data = $('#answerForm').serialize();
                var load = layer.load();
                $.ajax({
                    url     :       '{{ route('answer.store') }}',
                    type    :       'post',
                    data    :       data,
                    dataType:       'json',
                    success :       function (d) {
                        layer.msg(d.msg);
                        if(d.code == 200) {
                            setTimeout('location.href=\"{{ url("/") }}\"', 2000);
                        }
                    },
                    error   :       function () {
                        layer.close(load);
                    }
                });
            });
        });
    </script>
@endsection